<template>
    <draggable class="list-group" :component-data="{
        tag: 'ul',
        type: 'transition-group',
    }" :list="List" v-bind="{
        animation: 200,
        group: 'ghost',
        disabled: false,
        ghostClass: 'ghost',
    }" item-key="order">
        <template #item="{ element }">
            <div class="View">
                <span>{{ element.Name }}</span>
                <span>{{ element.children.default }}</span>
                <item :List="element.children.default"></item>
            </div>
        </template>
    </draggable>
</template>
<script setup>
import { ref } from 'vue';
import draggable from "vuedraggable";
import B from './B.vue'

const emit = defineEmits(['input']);

const drag = ref(false)
// const List = ref([]);
const props = defineProps(['List']);
const emitter = (value) => {
    emit("input", value);
}

</script>
<style lang="less" scoped>
.View {
    min-height: 50px;
    border: 1px solid #CCC;
    margin: 10px;
}
</style>